import React, { useState } from 'react';
import { Layout, Button, Popover, Space, Avatar } from 'antd';
import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
import './HeaderBar.less';

const { Header } = Layout;

/**
 * 头部导航栏组件
 * 包含退出按钮和用户信息
 */
const HeaderBar: React.FC = () => {
  const [logoutVisible, setLogoutVisible] = useState(false);

  /**
   * 处理退出登录
   */
  const handleLogout = () => {
    // 这里实现退出登录逻辑
    console.log('用户退出登录');
    setLogoutVisible(false);
    // 实际项目中应该调用退出接口并跳转到登录页
  };

  /**
   * 退出确认弹窗内容
   */
  const logoutContent = (
    <div style={{ padding: '16px' }}>
      <p style={{ marginBottom: '16px' }}>确定要退出系统吗？</p>
      <Space>
        <Button 
          size="small" 
          onClick={() => setLogoutVisible(false)}
        >
          取消
        </Button>
        <Button 
          type="primary" 
          size="small" 
          danger 
          onClick={handleLogout}
        >
          确认退出
        </Button>
      </Space>
    </div>
  );

  return (
    <Header className="header-bar">
      <div className="header-content">
        <div className="logo">
          <h1>城市生命线系统</h1>
        </div>
        
        <div className="user-info">
          <Space size="middle">
            <Popover
              content={logoutContent}
              trigger="click"
              open={logoutVisible}
              onOpenChange={setLogoutVisible}
              placement="bottomRight"
            >
              <Button 
                type="text" 
                icon={<LogoutOutlined />}
                className="logout-btn"
              >
                退出
              </Button>
            </Popover>
          </Space>
        </div>
      </div>
    </Header>
  );
};

export default HeaderBar;